<template>
    <el-drawer v-model="visibleDrawer" :destroy-on-close="true" :with-header="false" size="50%">
      <el-form :model="formModel" ref="formRef">
        <el-form-item label="题目标题:">
          <el-input style="width:387px !important" v-model="formQuestion.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="题目难度:">
          <QuestionSelector style="width:387px !important" v-model="formQuestion.difficulty" width="100%"
            placeholder="请选择题目难度">
          </QuestionSelector>
        </el-form-item>
        <el-form-item label="时间限制（单位毫秒）:">
          <el-input style="width:300px !important" v-model="formQuestion.timeLimit" placeholder="请输入时间限制"></el-input>
        </el-form-item>
        <el-form-item label="空间限制（单位字节）:">
          <el-input style="width:300px !important" v-model="formQuestion.spaceLimit" placeholder="请输入空间限制"></el-input>
        </el-form-item>
        <el-form-item label="题目内容:">
          <div class="editor">
            <quill-editor placeholder="请输入题目内容" v-model:content="formQuestion.content" content-type="html"></quill-editor>
          </div>
        </el-form-item>
        <el-form-item label="题目用例:">
          <el-input style="width:387px !important" v-model="formQuestion.questionCase" placeholder="请输入题目用例"></el-input>
        </el-form-item>
        <el-form-item label="默认代码块:">
          <code-editor @update:value="handleEditorContent" ref="defaultCodeRef"></code-editor>
        </el-form-item>
        <el-form-item label="main函数:">
          <code-editor @update:value="handleEditorMainFunc" ref="mainFucRef"></code-editor>
        </el-form-item>
        <el-form-item>
          <el-button class="question-button" type="primary" plain @click="onSubmit()">发布</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </template>
  
<script setup>
    import { QuillEditor } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    import CodeEditor from './CodeEditor.vue';
    import { reactive, ref } from 'vue';
    import QuestionSelector from './QuestionSelector.vue';
    import { addQuestionService, editQuestionService, getQuestionDetailService } from '../apis/question';

    const visibleDrawer = ref(false)

    const formQuestion = reactive({
      questionId: '',
      title: '',
      difficulty: '',
      timeLimit: '',
      spaceLimit: '',
      content: '',
      questionCase: '',
      defaultCode: '',
      mainFuc: ''
    })

    const defaultCodeRef = ref()
    const mainFucRef = ref()

    async function open(questionId) {
        visibleDrawer.value = true
        for (const key in formQuestion) {
          if (formQuestion.hasOwnProperty(key)) {
            formQuestion[key] = '';
          }
        }
        if(questionId) {
          const questionDetail = await getQuestionDetailService(questionId)
          Object.assign(formQuestion, questionDetail.data)
          defaultCodeRef.value.setAceCode(formQuestion.defaultCode)
          mainFucRef.value.setAceCode(formQuestion.mainFuc)
        }
    }

    defineExpose({
        open 
    })

    function validate() {
        let msg = ''
        if (!formQuestion.title) {
            msg = '请添加题目标题'
        } else if (formQuestion.difficulty == '') {
            msg = '请选择题目难度'
        } else if (!formQuestion.timeLimit) {
            msg = '请输入时间限制'
        } else if (!formQuestion.spaceLimit) {
            msg = '请输入空间限制'
        } else if (!formQuestion.content) {
            msg = '请输入题目内容信息'
        } else if (!formQuestion.questionCase) {
            msg = '请输入题目用例名称'
        } else if (!formQuestion.defaultCode) {
            msg = '请输入默认代码'
        } else if (!formQuestion.mainFuc) {
            msg = '请输入main函数'
        } else {
            msg = ''
        }
        return msg
    }
    const emit = defineEmits(['success'])

    async function onSubmit() {
        const errorMessage = validate()
        if (errorMessage) {
            ElMessage.error(errorMessage);
            return false
        }
        const fd = new FormData()
        for (let key in formQuestion) {
            fd.append(key, formQuestion[key])
        }
        console.log(formQuestion)
        if (formQuestion.questionId) {
            //编辑题目请求
            await editQuestionService(fd)
            ElMessage.success('编辑成功')
            emit('success', 'edit')
        } else {
            await addQuestionService(fd)
            ElMessage.success('添加成功')
            emit('success', 'add')
        }
        visibleDrawer.value = false
    }

    function handleEditorContent (content) {
      formQuestion.defaultCode = content
    }

    function handleEditorMainFunc (content) {
      formQuestion.mainFuc = content
    }

</script>

<style lang="scss">
.question-button {
  width: 200px;
}
</style>